<template>
	<el-card class="box-card">
		查询条件
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input placeholder="" v-model="form.name"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="findList()">查询</el-button>
			</el-col>
		</el-row>
		<br />
		<el-button style="float: right; padding: 10px 10px" type="primary" icon="el-icon-circle-plus"
			@click="openAddDialog()">添加</el-button>
		<el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
			<el-table-column prop="name" label="标题" align="center" width="180"></el-table-column>
			<el-table-column prop="image" label="封面图" width="200" align="center">
				<template slot-scope="scope" width="380">
					<img :src="scope.row.image" width="180" height="120" style="border-radius: 10px; box-shadow: 0 2px 8px #eee;" />
				</template>
			</el-table-column>
			<el-table-column prop="description" label="简介" align="center" width="480"></el-table-column>
			<el-table-column prop="openingHours" label="开启时间" align="center" width="320"></el-table-column>
			<el-table-column prop="ticketPrice" label="票价" align="center" width="180"></el-table-column>
			<el-table-column label="操作" fixed="right" align="center" width="260">
				<template slot-scope="scope">
					<el-button size="mini" @click="openUpdateDialog(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteAdmin(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<!-- 分页组件 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="form.pageNo" :page-sizes="[4,6,8]" :page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<Add ref="add"></Add>
		<Update ref="update"></Update>
	</el-card>
</template>
<script>
	import Add from './Add.vue';
	import Update from './Update.vue';
	export default {
		components: {
			Add,
			Update
		},
		data() {
			return {
				tableData: [],
				total: 0,
				form: {
					name: '',
					pageNo: 1,
					pageSize: 4
				}
			}
		},
		methods: {
			openUpdateDialog(id) {
				this.$refs.update.dialogVisible = true
				this.$refs.update.findNewsById(id)
			},
			//打开新增对话框
			openAddDialog() {
				this.$refs.add.dialogVisible = true;
			},
			//当在下拉框改变页数大小时触发此函数
			handleSizeChange(pageSize) {
				this.form.pageSize = pageSize;
				this.findList();
			},
			handleCurrentChange(num) { //当重新改变当前页数时触发
				this.form.pageNo = num;
				this.findList();
			},
			findList() {
				this.$http.post("adminApi/attractions/findList", this.form).then((resp) => {
					if (resp.data.code == 200) {
						this.tableData = resp.data.data.list;
						this.total = resp.data.data.total;
					}
				})
			},
			deleteAdmin(id) {
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.get("adminApi/attractions/delete?id=" + id).then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								duration: 500,
								message: resp.data.message,
								type: 'success',
								onClose: () => {
									this.$router.go(0);
								}
							});
						}
					})
				})
			}
		},
		mounted() {

			this.findList();
		}
	}
</script>